{extend name="base" /}
{block name="css"}
{css href="__CSS__/pay.css" /}
<style>
    .weui-navBar {background: var(--swiper-theme-color);}
</style>
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="weui-tab__bd-item">
  <header class="weui-navBar weui-navBar-fixed">
    <a href="javascript:history.go(-1);" class="weui-navBar-item">
      <i class="icon iconfont icon-fanhui f-white"></i>
    </a>
    <div class="weui-center">
      <span class="weui-center-title f-white">支付</span>
    </div>
    <a class="weui-navBar-item actionsheet">
      <i class="icon iconfont icon-gengduo f-white"></i>
    </a>
  </header>
    <div class="pay">
        <a data-url="pay_code.html" class="pay-qrcode">
            <i class="icon iconfont icon-erweima1"></i>
            <p>收付款</p>
        </a>
        <a data-url="wallet.html" class="pay-wallet">
            <i class="icon iconfont icon-daifukuan"></i>
            <p>钱包 <span>¥{$info.money|default="0.00"}</span></p>
        </a>
    </div>
    <div class="weui-flex">
        <div class="weui-flex-box">
          <h2>腾讯服务</h2>
        </div>
    </div>
    <div class="grids">
        <div class="weui-grids">
            <a data-url="turn.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon4.png" alt="">
                </div>
                <p class="weui-grid__label">转账</p>
            </a>
            <a data-url="life.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon5.png" alt="">
                </div>
                <p class="weui-grid__label">生活缴费</p>
            </a>
            <a data-url="city.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon7.png" alt="">
                </div>
                <p class="weui-grid__label">城市服务</p>
            </a>
            <a data-url="healthy.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon10.png" alt="">
                </div>
                <p class="weui-grid__label">医疗健康</p>
            </a>
        </div>
    </div>
    <div class="weui-flex">
        <div class="weui-flex-box">
          <h2>第三方服务</h2>
        </div>
    </div>
    <div class="grids has-more">
        <div class="weui-grids">
            <a data-url="traffic.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon11.png" alt="">
                </div>
                <p class="weui-grid__label">火车票机票</p>
            </a>
            <a data-url="taxi.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon12.png" alt="">
                </div>
                <p class="weui-grid__label">滴滴出行</p>
            </a>
            <a data-url="o2o.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon16.png" alt="">
                </div>
                <p class="weui-grid__label">吃喝玩乐</p>
            </a>
            <a data-url="hotel.html" class="weui-grid">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon17.png" alt="">
                </div>
                <p class="weui-grid__label">酒店</p>
            </a>
            <a data-url="deposit.html" class="weui-grid weui-grid-more">
                <div class="weui-grid__icon">
                    <img src="https://www.17sucai.com/preview/1424582/2019-11-21/wx/images/icon21.png" alt="">
                </div>
                <p class="weui-grid__label">理财通</p>
            </a>
        </div>
    </div>
    <div class="grids-more"><span class="toggle">更多服务</span></div>
</div>
<!-- 主要内容 结束 -->
{/block}
{block name="js"}
<script type="text/javascript">
  $(function () {
    var hasMore = document.querySelectorAll('.has-more')
    var toggle = document.querySelectorAll('.toggle')

    ;[].forEach.call(toggle, function(item, index) {
        item.addEventListener('click', function () {
            item.classList.toggle('show')
            hasMore[index].classList.toggle('show-more')
            item.textContent = item.textContent == '更多服务' ? '收起' : '更多服务'
        })
    })
    $('.pay-qrcode,.pay-wallet,.weui-grid').click(function() {
        var title = $(this).find('p').text();
        var url = $(this).data('url');
        if(!url) return $.toast(title,'text');
        $(location).attr('href', url);
    });
    //循环请求局部刷新
    var intervalv = setInterval(function(){
        $.post('get_money.html', function(result){
            $('.pay-wallet p span').text('¥'+result.data.money);
        })
    }, 5000);
  });
</script>
{/block}